import React, { useEffect, useRef } from "react";
import { Row, Col } from "antd";
import "./style.scss";
import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";
import { Chart } from "@antv/g2";

const Index: React.FC = () => {
  const box = useRef<HTMLDivElement | null>(null);
  const option = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };
  const option1 = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    title: {
      text: "Gradient Stacked Area Chart",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Line 1",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [140, 232, 101, 264, 90, 340, 250],
      },
      {
        name: "Line 2",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgb(77, 119, 255)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [120, 282, 111, 234, 220, 340, 310],
      },
      {
        name: "Line 3",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(55, 162, 255)",
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [320, 132, 201, 334, 190, 130, 220],
      },
      {
        name: "Line 4",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgb(135, 0, 157)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [220, 402, 231, 134, 190, 230, 120],
      },
      {
        name: "Line 5",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [220, 302, 181, 234, 210, 290, 150],
      },
    ],
  };
  useEffect(() => {
    // echarts
    const myChart = echarts.init(box.current as HTMLElement);
    // 绘制图表
    myChart.setOption(option);

    const data = [
      { genre: "Sports", sold: 275 },
      { genre: "Strategy", sold: 115 },
      { genre: "Action", sold: 120 },
      { genre: "Shooter", sold: 350 },
      { genre: "Other", sold: 150 },
    ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    // Step 1: 创建 Chart 对象

    // antd/g2
    const chart = new Chart({
      container: "c1",
      width: 400,
      height: 400,
    });

    // Step 2: 载入数据源
    chart.source(data);
    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart.interval().position("genre*sold").color("genre");
    // Step 4: 渲染图表
    chart.render();

    {
      // 渲染
      const data = [
        {
          year: "2001",
          population: 41.8,
        },
        {
          year: "2002",
          population: 38,
        },
        {
          year: "2003",
          population: 33.7,
        },
        {
          year: "2004",
          population: 30.7,
        },
        {
          year: "2005",
          population: 25.8,
        },
        {
          year: "2006",
          population: 31.7,
        },
        {
          year: "2007",
          population: 33,
        },
        {
          year: "2008",
          population: 46,
        },
        {
          year: "2009",
          population: 38.3,
        },
        {
          year: "2010",
          population: 28,
        },
        {
          year: "2011",
          population: 42.5,
        },
        {
          year: "2012",
          population: 30.3,
        },
      ];

      const chart = new Chart({
        container: "c2",
        height: 500,
        width: 400,
      });
      chart.source(data);
      chart.coord("polar");
      chart.legend({
        position: "right",
        offsetY: -500 / 2 + 180,
        offsetX: -140,
      });
      chart.axis(false);
      chart
        .interval()
        .position("year*population")
        // .color("year", G2.Global.colors_pie_16)
        .style({
          lineWidth: 1,
          stroke: "#fff",
        });
      chart.render();
    }
  }, []);
  return (
    <div>
      <Row>
        <Col span={12} style={{ padding: 6 }}>
          <div style={{ width: "100%", height: 400 }}>
            <div ref={box} style={{ width: "100%", height: "100%" }}></div>
          </div>
        </Col>
        <Col span={12} style={{ padding: 6 }}>
          <ReactECharts style={{ height: 400 }} option={option} />
        </Col>
        <Col span={12} style={{ padding: 6 }}>
          <ReactECharts style={{ height: 400 }} option={option1} />
        </Col>
        <Col span={12} style={{ padding: 6 }}>
          <div className="echarts" id="c1"></div>
        </Col>
        <Col span={12} style={{ padding: 6 }}>
          <div className="echarts" id="c2"></div>
        </Col>
        <Col span={12} style={{ padding: 6 }}></Col>
      </Row>
    </div>
  );
};

export default Index;
